<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名" style="width: 20%;" />
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input-number v-model="form.age" :min="18" :max="60" placeholder="请输入年龄" style="width: 20%;" />
      </el-form-item>

      <el-form-item label="性别" prop="sex">
        <el-select v-model="form.sex" placeholder="请选择性别" clearable style="width: 20%;">
          <el-option label="未知" value="" />
          <el-option label="男" value="M" />
          <el-option label="女" value="F" />
        </el-select>
      </el-form-item>

      <el-form-item label="生日" prop="birthDay">
        <el-date-picker v-model="form.birthDay" type="date" placeholder="请选择日期" style="width: 20%;" />
      </el-form-item>

      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" placeholder="请输入邮箱" style="width: 20%;" />
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input v-model="form.phone" placeholder="请输入手机号" style="width: 20%;" />
      </el-form-item>

      <el-form-item label="专业" prop="majority">
        <el-select v-model="form.majority" placeholder="请选择专业" clearable style="width: 20%;">
          <el-option label="软件工程" value="1" />
          <el-option label="信息安全" value="2" />
          <el-option label="计算机科学" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
        <el-button @click="resetForm('form')">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getStudentInfo, modifyStudent,addStudent } from '@/api/student'

export default {

  data() {
    const checkPhone = (rule, value, callback) => {
      // 百度 JS 正则表达式 手机号
      const reg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!value) {
        callback(new Error('请输入手机号'))
      } else if (!reg.test(value)) {
        callback(new Error('请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const checkEmail = (rule, value, callback) => {
      // 百度 JS 正则表达式 邮箱
      const reg = /^([0-9a-zA-Z_\.\-\])+\@([0-9a-zA-Z_\.\-\])+\.([a-zA-Z]+)$/
      if (value && !reg.test(value)) {
        callback(new Error('请输入正确的邮箱'))
      } else {
        callback()
      }
    }
    return {
      form: {
        name: '',
        age: 18,
        sex: undefined,
        birthDay: '1991-01-01',
        email: '',
        phone: '',
        majority: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入学生姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: checkPhone, trigger: 'blur' }
        ],
        email: [
          { validator: checkEmail, trigger: 'blur' }
        ],
        majority: [
          { required: true, message: '请选择专业', trigger: 'change' }
        ]
      }
    }
  },

  watch: { // 监听
    $route(to, from) { // 路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  created() { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init() {
      // 判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        // 从路径获取id值
        const id = this.$route.params.id
        // 调用根据id查询的方法
        this.getInfo(id)
      }
    },

    // 根据id查询单个学生信息
    getInfo(id) {
      getStudentInfo({ 'id': id })
        .then(response => {
          this.form = response.data
          console.log(this.form)
        })
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 判断修改还是添加
          if (this.form.stuId) {
            // 修改
            this.updateStudent()
          }else {
            this.saveStudent()
          }
        } else {
          return false
        }
      })
    },
    // 修改学生
    updateStudent() {
      modifyStudent(this.form)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/student/student' })
        })
    },

    saveStudent() {
      addStudent(this.form)
        .then(response => {
          // 提示信息
          this.$message({
            type: 'success',
            message: '添加!'
          })
          // 回到列表页面 路由跳转
          this.$router.push({ path: '/student/student' })
        })
    },

    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

